<template>
  <div class="community-members">
    <div class="top">
      <img src="@/assets/images/sgjHome/left-icon.png" alt="" />
      <span>社区人员入驻</span>
      <img src="@/assets/images/sgjHome/right-icon.png" alt="" />
    </div>
    <div class="line"></div>
    <div class="content-wrap">
      <el-row>
        <el-col :span="12">
          <div class="left">
            <div class="title">社区成员说明</div>
            <div class="sub-title">
              普通成员可申请入驻社区，成为当前社区用户，能够获取社区的更多公开资源，参与到社区项目建设，获取社区贡献值。社区会针对贡献值高的用户给予实际奖励。
            </div>
            <div class="buttou-group">
              <el-button class="apply-join">
                <span>申请入驻</span>
                <img src="@/assets/images/sgjHome/right-jiantou.png" alt="" />
              </el-button>
              <el-button class="view-user">
                <span>查看入驻用户</span>
                <img src="@/assets/images/sgjHome/right-jiantou.png" alt="" />
              </el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="right">
            <div class="title">
              <span class="title-left">社区成员贡献榜</span>
              <span class="title-right">总榜</span>
            </div>
            <ul>
              <li v-for="(item, index) in list" :key="index">
                <div class="name-wrap">
                  <img
                    src="@/assets/images/sgjHome/one.png"
                    alt=""
                    v-if="index === 0"
                  />
                  <img
                    src="@/assets/images/sgjHome/two.png"
                    alt=""
                    v-if="index === 1"
                  />
                  <img
                    src="@/assets/images/sgjHome/three.png"
                    alt=""
                    v-if="index === 2"
                  />
                  <span class="index" v-if="index > 2">{{ index + 1 }}</span>
                  <img
                    class="touxiang"
                    src="@/assets/images/sgjHome/touxiang1.png"
                    alt=""
                  />
                  <span class="name">泽宇-Li</span>
                </div>
                <div class="num">{{item.num}}</div>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      theme: this.$store.state.settings.theme,
      sideTheme: this.$store.state.settings.sideTheme,
      list: [
        { name: "首页", num: 1234 },
        { name: "开源代码共享", num: 11 },
        { name: "科创问答GPT", num: 11 },
        { name: "课程学习", num: 11},
        { name: "技术前沿", num: 11 },
        { name: "科创论坛", num: 11 },
        { name: "极客揭榜", num: 11 },
        { name: "创新创意大赛", num: 11 },
      ],
      currentIndex: 0,
    };
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.settings.showSettings;
      },
    },
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "fixedHeader",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "topNav",
          value: val,
        });
        if (!val) {
          this.$store.dispatch("app/toggleSideBarHide", false);
          this.$store.commit(
            "SET_SIDEBAR_ROUTERS",
            this.$store.state.permission.defaultRoutes
          );
        }
      },
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "tagsView",
          value: val,
        });
      },
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "sidebarLogo",
          value: val,
        });
      },
    },
    dynamicTitle: {
      get() {
        return this.$store.state.settings.dynamicTitle;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "dynamicTitle",
          value: val,
        });
      },
    },
  },
  methods: {
    // 切换菜单
    changeMenu(val, path) {
      console.log(path, "path====");
      this.currentIndex = val;
      this.$router.push({ path: path });
    },
    themeChange(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "theme",
        value: val,
      });
      this.theme = val;
    },
    handleTheme(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "sideTheme",
        value: val,
      });
      this.sideTheme = val;
    },
    saveSetting() {
      this.$modal.loading("正在保存到本地，请稍候...");
      this.$cache.local.set(
        "layout-setting",
        `{
            "topNav":${this.topNav},
            "tagsView":${this.tagsView},
            "fixedHeader":${this.fixedHeader},
            "sidebarLogo":${this.sidebarLogo},
            "dynamicTitle":${this.dynamicTitle},
            "sideTheme":"${this.sideTheme}",
            "theme":"${this.theme}"
          }`
      );
      setTimeout(this.$modal.closeLoading(), 1000);
    },
    resetSetting() {
      this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
      this.$cache.local.remove("layout-setting");
      setTimeout("window.location.reload()", 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.community-members {
  padding: 48px 262px;
  background-color: #F7F8FB;
  .top {
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      margin: 0 10px;
      vertical-align: middle;
      font-size: 24px;
      color: rgb(68, 75, 86);
      font-weight: 700;
    }
  }
  .line {
    height: 1px;
    background: rgb(190, 213, 255);
    margin-top: 16px;
  }
  .content-wrap {
    margin-top: 24px;
    .left {
      background: url("~@/assets/images/sgjHome/community-members.png")
        no-repeat;
      background-size: 100% 100%;
      padding: 50px 100px 50px 50px;
      min-height: 663px;
      .title {
        font-family: 思源黑体;
        font-size: 24px;
        font-weight: 700;
        color: rgb(68, 68, 68);
        margin-bottom: 10px;
      }
      .sub-title {
        font-family: 思源黑体;
        font-size: 20px;
        font-weight: 400;
        color: rgb(68, 68, 68);
      }
      .buttou-group {
        margin-top: 20px;
      }
      .apply-join {
        padding: 12px 24px;
        margin-right: 30px;
        ::v-deep > span {
          display: flex;
          align-items: center;
          color: rgb(13, 134, 255);
          font-family: 思源黑体;
          font-size: 20px;
          font-weight: 400;
          line-height: 29px;
          letter-spacing: 0px;
          text-align: left;
          img {
            margin-left: 6px;
          }
        }
      }
      .view-user {
        padding: 12px 24px;
        background-color: initial;
        border-color: rgb(13, 134, 255);
        ::v-deep > span {
          display: flex;
          align-items: center;
          color: rgb(13, 134, 255);
          font-family: 思源黑体;
          font-size: 20px;
          font-weight: 400;
          line-height: 29px;
          letter-spacing: 0px;
          text-align: left;
          img {
            margin-left: 6px;
          }
        }
      }
    }
    .right {
      margin-left: 24px;
      border-radius: 12px;
      background-color: #fff;
      min-height: 663px;
      .title {
        height: 53px;
        line-height: 53px;
        background: url("~@/assets/images/sgjHome/contribution-list-bac.png")
          no-repeat;
        background-size: 100% 100%;
        border-radius: 12px 12px 0 0;
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        .title-left {
          color: rgb(82, 88, 102);
          font-family: 思源黑体;
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 0px;
          text-align: left;
        }
        .title-right {
          color: rgb(24, 144, 255);
          font-family: 思源黑体 CN;
          font-size: 16.33px;
          font-weight: 400;
          letter-spacing: 0px;
          text-align: center;
        }
      }
      ul {
        padding: 24px 24px 10px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 24px;
          &:nth-child(odd) {
            background: rgb(240, 247, 255);
          }

          .name-wrap {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .touxiang {
              margin: 0 24px;
            }
            .name {
              color: rgb(68, 75, 86);
              font-family: 思源黑体 CN;
              font-size: 17px;
              font-weight: 400;
              line-height: 25px;
              letter-spacing: 0px;
              text-align: left;
            }
            .index {
              display: inline-block;
              width: 34px;
              height: 34px;
              line-height: 34px;
              border-radius: 50%;
              color: rgb(255, 255, 255);
              font-family: 思源黑体 CN;
              font-size: 24.25px;
              background-color: rgb(24, 144, 255);
              text-align: center;
            }
          }
          .num {
            color: rgb(24, 144, 255);
            font-size: 20px;
            font-family: 思源黑体;
            
          }
        }
      }
    }
  }
}
</style>
